<script setup>
  import { NLayout, NLayoutSider, NMenu, NImage, NButton, NIcon } from "naive-ui";
  import UserHeader from "@/components/UserHeader.vue";
  import UserFooter from "@/components/UserFooter.vue";
  import UserMain from "./UserMain.vue";
  import { h, onMounted, ref, watch } from 'vue';
  import { RouterLink, useRoute } from "vue-router";
  import axiosInstance from "@/utils/axios";
  import logo from '../assets/logo.png'
  import { usemsgStore } from '@/stores/msgwrapper';
  import { ArrowNarrowRight } from '@vicons/tabler'
  import router from "@/router";

  const route = useRoute();
  const name = ref(route.name);

  const msgStore = usemsgStore()
  const { sendMessage } = msgStore

  const menuOptions = ref([])
  const loadAccessMenu = async () => {
    try {
      const response = await axiosInstance.get('/api/load_access');
      if (response.data.success == true && response.data.total > 0) {
        // 根据接口返回的数据动态生成菜单
        menuOptions.value = response.data.data.map(item => ({
          label: () =>
            h(
              RouterLink,
              {
                to: { name: item.access_url },
                style: { color: '#96c24e' }
              },
              { default: () => item.access_name }
            ),
          key: item.access_id,
        }));
      } else {
        sendMessage('error', "该账号异常,未有任何权限")
      }
    } catch (error) {
      console.log('获取菜单数据失败', error);
    }
  };

  const exit = () =>{
    // 清除浏览器中的 token
    localStorage.removeItem("token"); // 如果 Token 存储在 localStorage 中
    sessionStorage.removeItem("token"); // 如果 Token 存储在 sessionStorage 中
    // 执行其他清理操作（例如重置状态，清除缓存等）
    msgStore.$reset(); // 如果你使用了 Pinia store

    // 跳转到登录页
    router.push({ name: "login" }); 
  }

  onMounted(() => {
    loadAccessMenu();
  })

  watch(() => route.name, (newName) => {
    name.value = newName;
  });

</script>

<template>
  <n-space vertical>
    <n-layout style="border: 15px solid aquamarine;height: 750px">
      <n-layout has-sider>
        <n-layout-sider
          bordered
          collapse-mode="width"
          :collapsed-width="64"
          :width="240"
          :native-scrollbar="false"
          :inverted="inverted"
          style="height: 1300px;"
        >
          <n-image width="200px" :src="logo" preview-disabled></n-image>
          <n-menu
            :collapsed-width="64"
            :collapsed-icon-size="22"
            :options="menuOptions"
          />
        </n-layout-sider>

        <n-space vertical>
          <UserHeader :name="name"></UserHeader>
          <template v-if="name == 'home'">
            <UserMain></UserMain>
          </template>
          <template v-else>
            <router-view></router-view>
          </template>

          <UserFooter></UserFooter>
        </n-space>
      </n-layout>
    </n-layout>

    <!-- 固定在左下角的退出登录按钮 -->
    <n-button
      @click="exit"
      class="logout-button"
      type="info"
    >
      <template #icon>
        <n-icon>
          <ArrowNarrowRight />
        </n-icon>
      </template>
      退出登陆
    </n-button>
  </n-space>
</template>

<style scoped>
.logout-button {
  position: fixed;
  bottom: 60px;  /* 距离底部20px */
  left: 40px;    /* 距离左侧20px */
  z-index: 1000; /* 确保按钮层级较高，不会被其他元素遮挡 */
}
</style>
